<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <ul>
        <li><button class="an">变宽</button></li>
        <li><button class="an">变高</button></li>
        <li><button class="an">变色</button></li>
        <li><button class="an">隐藏</button></li>
        <li><button class="an">重置</button></li>
    </ul>
    <div class="hz">

    </div>
</body>

</html>
<script>
    var but = document.querySelectorAll(".an")
    var he = document.querySelector(".hz")
    for (let i = 0; i < but.length; i++) {
        but[i].onclick = function () {
            if (but[0]) {
                he.style.width = "200px"
            }
            if (but[1]) {
                he.style.height = "200px"
            }
            // if (but[2]) {
            //     he.style.backgroundColor = "red"
            // }
            // if (but[3]) {
            //     he.style.display = "none"
            // }
            // if (but[4]) {
            //     he.style.width = "100px"
            //     he.style.height = "100px"
            //     he.style.backgroundColor = "#000"
            //        he.style.display="black"
            // }
        }
    }
</script>
<style>
    .hz {
        width: 100px;
        height: 100px;
        background-color: #000;
    }

    li {
        list-style: none;
        margin-left: 20px;
    }

    ul {
        display: flex;

    }

    body {
        margin: auto 0;
    }
</style>